<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>

    <div id="app">
        <div>
            此处测试输入框
            <div>
                {{inpput_model}}
            </div>
            <input type="text" placeholder="测试输入框之双向绑定" v-model="inpput_model">
        </div>
        <div>
            <!-- data.sex的值即为选中的单选框的value的值【使用vue处理单选和复选框的时候，是不需要使用name属性去控制的】 -->
            <input type="radio" id="man" value="man" v-model="data.sex">
            <label for="man">男</label>
            <input type="radio" id="male" value="women" v-model="data.sex">
            <label for="male">女</label>
        </div>
        <div>
            <input type="checkbox" v-model="checkbox_checked">
            <span>checked:{{checkbox_checked}}</span>
        </div>
        <div>
            <!-- 知识点【0】：需要使用数组去绑定复选框的值，不然是无法生效的 -->
            <label for=""><input type="checkbox" value="11"  v-model="multiChecked">测试1</label>
            <label for=""><input type="checkbox" value="22"  v-model="multiChecked">测试2</label>
            <label for=""><input type="checkbox" value="33"  v-model="multiChecked">测试3</label>
            <p>multiChecked:{{multiChecked | sky}}</p>
        </div>
        <div>
            <!-- 知识点【1】：自动将input的数据类型由字符串型转换为number类型 -->
            <!-- number属性在vue2.0中被舍弃 -->
            <input type="text" v-model="input_NUM" number>
        </div>
        <div>
            <!--知识点【2】：默认情况下，v-model在input事件中同步输入框值与数据，加lazy属性后从会改到在change事件中同步-->
            <!-- lazy属性在vue2.0中被舍弃 -->
            <input type="text" v-model="input_NUM" lazy>
        </div>
        <div>
            <!--知识点【3】：默认情况下，v-model在input事件中同步输入框值与数据，加lazy属性后从会改到在change事件中同步-->
            <!-- debounce属性在vue2.0中被舍弃 -->
            <input type="text" v-model="input_NUM" debounce="2000">
        </div>
        <div>
            <!--知识点【4】：默认情况下，v-model在input事件中同步输入框值与数据，加lazy属性后从会改到在change事件中同步-->
            <!-- trim属性新增在vue2.0 -->
            <input v-model.trim="input_NUM" />
        </div>
        <!-- 【警告】modifier -->
    </div>
    <script type="text/javascript" src="../../../../commonJS/vue.js"></script>
    <script type="text/javascript" src="../../../../commonJS/zepto-1.2.0.js"></script>
    <!-- <script type="text/javascript" src="../../../../commonJS/moment.js"></script> -->
    <!-- <script type="text/javascript" src="../../../../commonJS/common.js"></script> -->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                inpput_model: "输入框的数据双向绑定",
                input_NUM: "22",
                data: {
                    name: "",
                    sex: "",
                    interest: [],
                    indentity: "",
                },
                checkbox_checked: "",
                multiChecked: []
            },
            filters: {
                sky: function sky(value) {
                    if (value) {
                        return value.join("|")
                    } else {
                        return value
                    }
                },
                moon: function moon(value) {
                    console.log(value)
                }
            }
        })
    </script>
</body>